<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <title>增删改查</title>
    <link rel="icon" href="../image/favicon.ico">
    <link rel="stylesheet" href="../library/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../library/font-awesome/css/font-awesome.css" media="all">
    <link rel="stylesheet" href="../library/GridManager/index.css" media="all">
    <style>
        .gm-menu, .table-wrap {
            --gm-font-size: 13px;
        }
    </style>
</head>

<body style="padding:15px">
<form class="layui-form" lay-filter="query-form">
    <div class="layui-form-item" style="margin-bottom:15px">
        <div class="layui-col-sm3">
            <div class="layui-input-inline" style="width:90%">
                <input type="number" name="id" class="layui-input" placeholder="用户ID"/>
            </div>
        </div>

        <div class="layui-col-sm3">
            <div class="layui-input-inline" style="width:90%">
                <input type="text" name="name" class="layui-input" placeholder="用户名"/>
            </div>
        </div>

        <div class="layui-col-sm3">
            <div class="layui-input-inline" style="width:90%">
                <select name="gender" class="layui-select">
                    <option value="" selected>性别不限</option>
                    <option value="保密">保密</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>

        <div class="layui-btn-group layui-col-sm3">
            <button type="submit" class="layui-btn" lay-submit lay-filter="query-submit">
                <i class="fa fa-search"></i> 搜索
            </button>
            <button type="button" class="layui-btn layui-btn-normal add-button">
                <i class="fa fa-plus"></i> 添加
            </button>
        </div>
    </div>
</form>

<div style="height:calc(100vh - 85px)">
    <table id='main-table'></table>
</div>

<!--表单窗口-->
<template id="main-edit-win">
    <div style="padding:10px">
        <form id="main-edit-form" class="layui-form" lay-filter="main-edit-form">
            <input type="hidden" name="id" value="0"/>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input"
                           placeholder="请输入用户名" lay-verify="required"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" class="layui-input" placeholder="请输入新密码"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">新头像</label>
                <div class="layui-input-block">
                    <input type="file" name="header_file" placeholder="点击兄弟节点"
                           onchange="$(this).next().val($(this).val())" hidden/>
                    <input class="layui-input" style="cursor:pointer" placeholder="请选择新头像"
                           onclick="$(this).prev().click()" readonly/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <select name="gender" lay-verify="required">
                        <option value="保密" selected>保密</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <div id="select-role"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status" lay-verify="required">
                        <option value="1" selected>有效</option>
                        <option value="2">无效</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">签名</label>
                <div class="layui-input-block">
                    <textarea name="sign" class="layui-textarea" style="resize:none"
                              placeholder="请输入签名"></textarea>
                </div>
            </div>

            <div class="layui-form-item" style="text-align:center">
                <div style="margin:20px">
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="main-edit-ok">
                        <i class="fa fa-check"></i>确定
                    </button>

                    <button type="button" style="margin-left:50px" class="layui-btn layui-btn-warm"
                            onclick="layui.layer.closeAll()">
                        <i class="fa fa-close"></i>取消
                    </button>
                </div>
            </div>
        </form>
    </div>
</template>
<script src="../library/jquery/jquery.js" charset="utf-8"></script>
<script src="../library/layui/layui.js" charset="utf-8"></script>
<script src="../library/xm-select/xm-select.js" charset="utf-8"></script>
<script src="../library/GridManager/index.js" charset="utf-8"></script>
<script src="../admin/common.js" charset="utf-8"></script>
<script type="application/javascript">
    $(function () {
        var params = getUrlParams();
        var defaultParam = layui.form.val('query-form');
        layui.form.val('query-form', getUrlParams(params));

        // 监听搜索按钮
        layui.form.on('submit(query-submit)', function (form) {
            setUrlParams(form.field, defaultParam);
            GridManager.setQuery('main-table', form.field);
            return false;
        });

        $('.add-button').on('click', openEditWin);
        createTable(layui.form.val('query-form'));
    });

    var tableData = {
        "data": [{
            "id": 1,
            "name": "元宝",
            "gender": "男",
            "role": "管理员",
            "status": 1,
            "sign": "哈哈哈哈哈哈！",
            "auth_version": 33,
            "updated_at": "2022-06-28T22:16:54.8546638+08:00"
        }, {
            "id": 2,
            "name": "妲己",
            "gender": "女",
            "role": "前端",
            "status": 1,
            "sign": "没有心，就不会受伤~",
            "auth_version": 2,
            "updated_at": "2022-06-28T23:35:48.3446373+08:00"
        }, {
            "id": 3,
            "name": "亚瑟",
            "gender": "男",
            "role": "后端",
            "status": 1,
            "sign": "正义必胜！",
            "auth_version": 0,
            "updated_at": "2022-06-28T23:35:58.8191257+08:00"
        }, {
            "id": 4,
            "name": "九月",
            "gender": "女",
            "role": "测试",
            "status": 1,
            "sign": "好想早点放学出去玩~",
            "auth_version": 0,
            "updated_at": "2022-06-28T23:35:51.2530557+08:00"
        }, {
            "id": 5,
            "name": "小乔",
            "gender": "女",
            "role": "产品",
            "status": 1,
            "sign": "小乔要努力变强~",
            "auth_version": 0,
            "updated_at": "2022-06-28T21:59:56.6868107+08:00"
        }, {
            "id": 6,
            "name": "苏苏",
            "gender": "女",
            "role": "产品",
            "status": 1,
            "sign": "我要成为最强红线仙！",
            "auth_version": 0,
            "updated_at": "2022-06-28T21:59:58.9043835+08:00"
        }]
    };

    function createTable(params) {
        document.querySelector('#main-table').GM({
            gridManagerName: 'main-table',
            ajaxUrl: "../../../api/user/query",
            query: params,
            // ajaxData: gmAjaxData, // 远程数据
            ajaxData: tableData,
            ajaxType: 'POST',
            height: '100%',
            width: '100%',
            disableCache: false,
            supportAjaxPage: true,
            sizeData: [10, 20, 50, 100],
            supportCheckbox: false,
            supportMenu: true,
            useWordBreak: true,
            disableLine: true,
            disableBorder: true,
            supportAutoOrder: false,
            asyncTotals: {
                text: '加载中', handler: gmAjaxTotals
            },
            columnData: [{
                key: 'id', width: '100px', fixed: 'left',
                text: '用户ID', template: gmStrongTemplate
            }, {
                key: 'name', width: '200px', text: '用户名'
            }, {
                key: 'status', width: '200px', text: '状态',
                template: statusTemplate
            }, {
                key: 'gender', width: '200px', text: '性别',
                template: genderTemplate
            }, {
                key: 'role', width: '200px', text: '角色'
            }, {
                key: 'sign', text: '签名',
                template: gmPreTemplate
            }, {
                key: '_operate_', width: '160px', fixed: 'right',
                text: '操作', template: rowOperates
            }]
        });
    }

    function statusTemplate(cell, row, index, key) {
        var value = row[key] || 0;
        return {
            0: '<span style="color:white;background:#999;border-radius:5px;padding:3px">未知</span>',
            1: '<span style="color:white;background:#5b5;border-radius:5px;padding:3px">有效</span>',
            2: '<span style="color:white;background:#e88;border-radius:5px;padding:3px">无效</span>'
        }[value] || value;
    }

    function genderTemplate(cell, row, index, key) {
        var value = row[key] || '保密';
        return {
            保密: '<span style="color:white;background:#999;border-radius:5px;padding:3px">保密</span>',
            男: '<span style="color:white;background:#88e;border-radius:5px;padding:3px">男</span>',
            女: '<span style="color:white;background:#e88;border-radius:5px;padding:3px">女</span>'
        }[value] || value;
    }

    function rowOperates() {
        return '<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="openEditWin(this)">' +
            '<i class="fa fa-pencil"></i> 修改</button>' +
            '<button class="layui-btn layui-btn-danger layui-btn-sm" onclick="deleteAction(this)">' +
            '<i class="fa fa-remove"></i> 删除</button>';
    }

    // 编辑提交按钮
    function editFormSubmit(form) {
        var data = form.field;
        layui.layer.closeAll();
        layui.layer.msg("保存成功\n" + JSON.stringify(data), {icon: 1});
        return false;
    }

    // 打开编辑窗口
    function openEditWin(e) {
        var data = GridManager.getRowData('main-table', getParentRow(e)) || {};
        layui.layer.open({
            type: 1,
            title: '<i class="fa fa-list"></i> ' + (data.id ? '修改用户 ' + data.id : '新增用户'),
            offset: '160px',
            area: '600px',
            content: $('#main-edit-win').html(),
            success: function () {
                xmSelect.render({
                    el: '#select-role',
                    name: 'role',
                    data: [{name: '管理员', value: '管理员'},
                        {name: '前端', value: '前端'},
                        {name: '后端', value: '后端'},
                        {name: '产品', value: '产品'},
                        {name: '测试', value: '测试'}]
                });
            }
        });
        data.header_file = "";
        layui.form.val('main-edit-form', data);
        // 获取下拉组件赋值，true表示获取单个
        xmSelect.get('#select-role', true).setValue((data.role || "").split(","));
        // 监听编辑提交
        layui.form.on('submit(main-edit-ok)', editFormSubmit);
        layui.form.render();
    }

    // 删除操作
    function deleteAction(e) {
        var data = GridManager.getRowData('main-table', getParentRow(e)) || {};
        layui.layer.confirm('你确定要删除' + data.id + '?', {
            title: '<i class="fa fa-remove"></i> 确认删除', icon: 3
        }, function () {
            layui.layer.msg("删除" + data.id + "成功", {icon: 1});
        });
    }
</script>
</body>
</html>